
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-list"></use>
                    </svg>
                    <div class="name">列表</div>
                    <div class="fontclass">#icon-list</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-send"></use>
                    </svg>
                    <div class="name">发送</div>
                    <div class="fontclass">#icon-send</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-recharge"></use>
                    </svg>
                    <div class="name">充值</div>
                    <div class="fontclass">#icon-recharge</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paytype"></use>
                    </svg>
                    <div class="name">付款方式</div>
                    <div class="fontclass">#icon-paytype</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ebook"></use>
                    </svg>
                    <div class="name">电子书</div>
                    <div class="fontclass">#icon-ebook</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-speaker"></use>
                    </svg>
                    <div class="name">扬声器</div>
                    <div class="fontclass">#icon-speaker</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tag"></use>
                    </svg>
                    <div class="name">标签</div>
                    <div class="fontclass">#icon-tag</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wallet"></use>
                    </svg>
                    <div class="name">钱袋</div>
                    <div class="fontclass">#icon-wallet</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-camera"></use>
                    </svg>
                    <div class="name">照相机</div>
                    <div class="fontclass">#icon-camera</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right"></use>
                    </svg>
                    <div class="name">正确</div>
                    <div class="fontclass">#icon-right</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fault"></use>
                    </svg>
                    <div class="name">错误</div>
                    <div class="fontclass">#icon-fault</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-deny"></use>
                    </svg>
                    <div class="name">禁止</div>
                    <div class="fontclass">#icon-deny</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hint"></use>
                    </svg>
                    <div class="name">提示</div>
                    <div class="fontclass">#icon-hint</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-act"></use>
                    </svg>
                    <div class="name">创意</div>
                    <div class="fontclass">#icon-act</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-account"></use>
                    </svg>
                    <div class="name">账户</div>
                    <div class="fontclass">#icon-account</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-file"></use>
                    </svg>
                    <div class="name">文件</div>
                    <div class="fontclass">#icon-file</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-editfile"></use>
                    </svg>
                    <div class="name">编辑文件</div>
                    <div class="fontclass">#icon-editfile</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-files"></use>
                    </svg>
                    <div class="name">复制文件</div>
                    <div class="fontclass">#icon-files</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-books"></use>
                    </svg>
                    <div class="name">资料库</div>
                    <div class="fontclass">#icon-books</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-stat"></use>
                    </svg>
                    <div class="name">竖状图</div>
                    <div class="fontclass">#icon-stat</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-plan"></use>
                    </svg>
                    <div class="name">计划</div>
                    <div class="fontclass">#icon-plan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-write"></use>
                    </svg>
                    <div class="name">用研</div>
                    <div class="fontclass">#icon-write</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-key"></use>
                    </svg>
                    <div class="name">密匙</div>
                    <div class="fontclass">#icon-key</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-manage"></use>
                    </svg>
                    <div class="name">管理</div>
                    <div class="fontclass">#icon-manage</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-home"></use>
                    </svg>
                    <div class="name">首页</div>
                    <div class="fontclass">#icon-home</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-search"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#icon-search</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user"></use>
                    </svg>
                    <div class="name">用户</div>
                    <div class="fontclass">#icon-user</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-message"></use>
                    </svg>
                    <div class="name">对话</div>
                    <div class="fontclass">#icon-message</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-email"></use>
                    </svg>
                    <div class="name">邮件</div>
                    <div class="fontclass">#icon-email</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-good"></use>
                    </svg>
                    <div class="name">赞扬</div>
                    <div class="fontclass">#icon-good</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bad"></use>
                    </svg>
                    <div class="name">批评</div>
                    <div class="fontclass">#icon-bad</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-set"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-set</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-delete"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-delete</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-info"></use>
                    </svg>
                    <div class="name">信息</div>
                    <div class="fontclass">#icon-info</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-help"></use>
                    </svg>
                    <div class="name">帮助</div>
                    <div class="fontclass">#icon-help</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mark"></use>
                    </svg>
                    <div class="name">收藏</div>
                    <div class="fontclass">#icon-mark</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-love"></use>
                    </svg>
                    <div class="name">喜爱</div>
                    <div class="fontclass">#icon-love</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-friends"></use>
                    </svg>
                    <div class="name">好友</div>
                    <div class="fontclass">#icon-friends</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-edit"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-edit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-attach"></use>
                    </svg>
                    <div class="name">附件</div>
                    <div class="fontclass">#icon-attach</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biglist"></use>
                    </svg>
                    <div class="name">大列表</div>
                    <div class="fontclass">#icon-biglist</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-imglist"></use>
                    </svg>
                    <div class="name">大缩略图列表</div>
                    <div class="fontclass">#icon-imglist</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-falllist"></use>
                    </svg>
                    <div class="name">瀑布流</div>
                    <div class="fontclass">#icon-falllist</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ilist"></use>
                    </svg>
                    <div class="name">列表</div>
                    <div class="fontclass">#icon-ilist</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-download"></use>
                    </svg>
                    <div class="name">下载</div>
                    <div class="fontclass">#icon-download</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sendemail"></use>
                    </svg>
                    <div class="name">发送邮件</div>
                    <div class="fontclass">#icon-sendemail</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add"></use>
                    </svg>
                    <div class="name">加</div>
                    <div class="fontclass">#icon-add</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sub"></use>
                    </svg>
                    <div class="name">减</div>
                    <div class="fontclass">#icon-sub</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-exit"></use>
                    </svg>
                    <div class="name">退出</div>
                    <div class="fontclass">#icon-exit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-openemail"></use>
                    </svg>
                    <div class="name">打开信息</div>
                    <div class="fontclass">#icon-openemail</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-appcenter"></use>
                    </svg>
                    <div class="name">应用中心</div>
                    <div class="fontclass">#icon-appcenter</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-right1"></use>
                    </svg>
                    <div class="name">向右</div>
                    <div class="fontclass">#icon-right1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ring"></use>
                    </svg>
                    <div class="name">环</div>
                    <div class="fontclass">#icon-ring</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-money"></use>
                    </svg>
                    <div class="name">金额</div>
                    <div class="fontclass">#icon-money</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-image"></use>
                    </svg>
                    <div class="name">图片</div>
                    <div class="fontclass">#icon-image</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pingban"></use>
                    </svg>
                    <div class="name">平板</div>
                    <div class="fontclass">#icon-pingban</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bookmark"></use>
                    </svg>
                    <div class="name">书签</div>
                    <div class="fontclass">#icon-bookmark</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuanshi"></use>
                    </svg>
                    <div class="name">钻石</div>
                    <div class="fontclass">#icon-zuanshi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baidu"></use>
                    </svg>
                    <div class="name">百度</div>
                    <div class="fontclass">#icon-baidu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fanhui"></use>
                    </svg>
                    <div class="name">返回</div>
                    <div class="fontclass">#icon-fanhui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-subscription"></use>
                    </svg>
                    <div class="name">订阅</div>
                    <div class="fontclass">#icon-subscription</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fanhuidingbu"></use>
                    </svg>
                    <div class="name">返回顶部</div>
                    <div class="fontclass">#icon-fanhuidingbu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuaxin"></use>
                    </svg>
                    <div class="name">刷新</div>
                    <div class="fontclass">#icon-shuaxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-desk"></use>
                    </svg>
                    <div class="name">办公桌</div>
                    <div class="fontclass">#icon-desk</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangxia"></use>
                    </svg>
                    <div class="name">向下</div>
                    <div class="fontclass">#icon-xiangxia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangshang"></use>
                    </svg>
                    <div class="name">向上</div>
                    <div class="fontclass">#icon-xiangshang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yinxingqia"></use>
                    </svg>
                    <div class="name">银行卡</div>
                    <div class="fontclass">#icon-yinxingqia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dotc"></use>
                    </svg>
                    <div class="name">点</div>
                    <div class="fontclass">#icon-dotc</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangyou"></use>
                    </svg>
                    <div class="name">向右</div>
                    <div class="fontclass">#icon-xiangyou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liwu"></use>
                    </svg>
                    <div class="name">礼物</div>
                    <div class="fontclass">#icon-liwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconshugang"></use>
                    </svg>
                    <div class="name">icon-竖杠</div>
                    <div class="fontclass">#icon-iconshugang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dot"></use>
                    </svg>
                    <div class="name">点</div>
                    <div class="fontclass">#icon-dot</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrowi"></use>
                    </svg>
                    <div class="name">右箭头</div>
                    <div class="fontclass">#icon-arrowi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrow"></use>
                    </svg>
                    <div class="name">小箭头</div>
                    <div class="fontclass">#icon-arrow</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-writer"></use>
                    </svg>
                    <div class="name">管理员</div>
                    <div class="fontclass">#icon-writer</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paylog"></use>
                    </svg>
                    <div class="name">交易记录</div>
                    <div class="fontclass">#icon-paylog</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianhua"></use>
                    </svg>
                    <div class="name">电话</div>
                    <div class="fontclass">#icon-dianhua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwu"></use>
                    </svg>
                    <div class="name">购物</div>
                    <div class="fontclass">#icon-gouwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tubiao"></use>
                    </svg>
                    <div class="name">图表</div>
                    <div class="fontclass">#icon-tubiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yejianmoshi"></use>
                    </svg>
                    <div class="name">夜间模式</div>
                    <div class="fontclass">#icon-yejianmoshi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zanting"></use>
                    </svg>
                    <div class="name">暂停</div>
                    <div class="fontclass">#icon-zanting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qq"></use>
                    </svg>
                    <div class="name">QQ</div>
                    <div class="fontclass">#icon-qq</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huangguan"></use>
                    </svg>
                    <div class="name">皇冠</div>
                    <div class="fontclass">#icon-huangguan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rencan"></use>
                    </svg>
                    <div class="name">人参</div>
                    <div class="fontclass">#icon-rencan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unie61d"></use>
                    </svg>
                    <div class="name">微博</div>
                    <div class="fontclass">#icon-unie61d</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tubiao1"></use>
                    </svg>
                    <div class="name">图表</div>
                    <div class="fontclass">#icon-tubiao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dollar"></use>
                    </svg>
                    <div class="name">金币充值</div>
                    <div class="fontclass">#icon-dollar</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-windows"></use>
                    </svg>
                    <div class="name">windows</div>
                    <div class="fontclass">#icon-windows</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrows"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-arrows</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hongjiu"></use>
                    </svg>
                    <div class="name">红酒</div>
                    <div class="fontclass">#icon-hongjiu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pictxt"></use>
                    </svg>
                    <div class="name">图文</div>
                    <div class="fontclass">#icon-pictxt</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangxia"></use>
                    </svg>
                    <div class="name">上下</div>
                    <div class="fontclass">#icon-shangxia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-coin"></use>
                    </svg>
                    <div class="name">137学币1</div>
                    <div class="fontclass">#icon-coin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-log"></use>
                    </svg>
                    <div class="name">日志</div>
                    <div class="fontclass">#icon-log</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-read"></use>
                    </svg>
                    <div class="name">书</div>
                    <div class="fontclass">#icon-read</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouji"></use>
                    </svg>
                    <div class="name">手机</div>
                    <div class="fontclass">#icon-shouji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                    <div class="name">微信</div>
                    <div class="fontclass">#icon-weixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diannao"></use>
                    </svg>
                    <div class="name">电脑</div>
                    <div class="fontclass">#icon-diannao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-piao"></use>
                    </svg>
                    <div class="name">票</div>
                    <div class="fontclass">#icon-piao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-naicha"></use>
                    </svg>
                    <div class="name">奶茶</div>
                    <div class="fontclass">#icon-naicha</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon"></use>
                    </svg>
                    <div class="name">阿里</div>
                    <div class="fontclass">#icon-icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-danxianhuaduo"></use>
                    </svg>
                    <div class="name">单线花朵</div>
                    <div class="fontclass">#icon-danxianhuaduo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kuaizhuanghuaduo"></use>
                    </svg>
                    <div class="name">块状花朵</div>
                    <div class="fontclass">#icon-kuaizhuanghuaduo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-vip"></use>
                    </svg>
                    <div class="name">vip</div>
                    <div class="fontclass">#icon-vip</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhifubao"></use>
                    </svg>
                    <div class="name">支付宝</div>
                    <div class="fontclass">#icon-zhifubao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fudan"></use>
                    </svg>
                    <div class="name">福蛋</div>
                    <div class="fontclass">#icon-fudan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-v"></use>
                    </svg>
                    <div class="name">v</div>
                    <div class="fontclass">#icon-v</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baoji"></use>
                    </svg>
                    <div class="name">鲜花</div>
                    <div class="fontclass">#icon-baoji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qingbaitian"></use>
                    </svg>
                    <div class="name">晴（白天）</div>
                    <div class="fontclass">#icon-qingbaitian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shang201"></use>
                    </svg>
                    <div class="name">赏2-01</div>
                    <div class="fontclass">#icon-shang201</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yonghutouxiang"></use>
                    </svg>
                    <div class="name">用户头像</div>
                    <div class="fontclass">#icon-yonghutouxiang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huabiyanse"></use>
                    </svg>
                    <div class="name">画笔颜色</div>
                    <div class="fontclass">#icon-huabiyanse</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zitidaxiao"></use>
                    </svg>
                    <div class="name">字体大小</div>
                    <div class="fontclass">#icon-zitidaxiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nv"></use>
                    </svg>
                    <div class="name">女</div>
                    <div class="fontclass">#icon-nv</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nan"></use>
                    </svg>
                    <div class="name">男</div>
                    <div class="fontclass">#icon-nan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31shoucangxuanzhong"></use>
                    </svg>
                    <div class="name">3.1收藏-选中</div>
                    <div class="fontclass">#icon-31shoucangxuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31shoucang"></use>
                    </svg>
                    <div class="name">3.1收藏</div>
                    <div class="fontclass">#icon-31shoucang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31guanzhu1xuanzhong"></use>
                    </svg>
                    <div class="name">3.1关注1-选中</div>
                    <div class="fontclass">#icon-31guanzhu1xuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31guanzhu1"></use>
                    </svg>
                    <div class="name">3.1关注1</div>
                    <div class="fontclass">#icon-31guanzhu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wangzhan"></use>
                    </svg>
                    <div class="name">网站</div>
                    <div class="fontclass">#icon-wangzhan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jianglisuode"></use>
                    </svg>
                    <div class="name">奖励所得</div>
                    <div class="fontclass">#icon-jianglisuode</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chudianpisa"></use>
                    </svg>
                    <div class="name">厨电_披萨</div>
                    <div class="fontclass">#icon-chudianpisa</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiangli"></use>
                    </svg>
                    <div class="name">奖励</div>
                    <div class="fontclass">#icon-jiangli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaolianxiuxi"></use>
                    </svg>
                    <div class="name">教练休息</div>
                    <div class="fontclass">#icon-jiaolianxiuxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hongbao"></use>
                    </svg>
                    <div class="name">红包</div>
                    <div class="fontclass">#icon-hongbao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wan"></use>
                    </svg>
                    <div class="name">完</div>
                    <div class="fontclass">#icon-wan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chart"></use>
                    </svg>
                    <div class="name">图表</div>
                    <div class="fontclass">#icon-chart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-taobao"></use>
                    </svg>
                    <div class="name">淘宝</div>
                    <div class="fontclass">#icon-taobao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kafei"></use>
                    </svg>
                    <div class="name">咖啡</div>
                    <div class="fontclass">#icon-kafei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yinlian1193427easyiconnet"></use>
                    </svg>
                    <div class="name">银联</div>
                    <div class="fontclass">#icon-yinlian1193427easyiconnet</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pingguo"></use>
                    </svg>
                    <div class="name">苹果</div>
                    <div class="fontclass">#icon-pingguo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-anzhuo-copy"></use>
                    </svg>
                    <div class="name">安卓</div>
                    <div class="fontclass">#icon-anzhuo-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tangguo"></use>
                    </svg>
                    <div class="name">糖果</div>
                    <div class="fontclass">#icon-tangguo</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
